<template>
  <KView class="shop-mall-goods-menu">
    <KView v-for="menu in menus" :key="`menu_${menu.typeId}`" :class="{select:menu.typeId===currentMenu.typeId}" @click="menuChange(menu)">
      <span>{{menu.type}}</span>
      <template v-if="menu.typeId===currentMenu.typeId">
        <KView class="menu-select-line"></KView>
      </template>
      <KView v-if="getBuyGoodsCount(menu)>0" class="goods-menu-count">{{getBuyGoodsCount(menu)}}</KView>
    </KView>
    <KView class="shop-mall-goods-menu-null"></KView>
  </KView>
</template>

<script>
  export default {
    props: {
      shopGoods: {
        type: Object,
        required: true
      },
      buyRecord: {
        type: Object,
        required: true
      }
    },

    computed: {
      menus() {
        return this.shopGoods.shopGoodsList;
      },
      currentMenu() {
        return this.shopGoods.currentGoods;
      }
    },

    data() {
      return {};
    },

    methods: {
      menuChange(menu) {
        let currentMenu = this.currentMenu;
        let typeId = menu.typeId;
        if (currentMenu.typeId === typeId) {
          return;
        }

        this.shopGoods.setMenu(typeId);
        this.$emit('change', menu);
      },
      getBuyGoodsCount(menu) {
        let typeId = menu.typeId;
        let buyRecord = this.buyRecord;
        let count = buyRecord.getRecordCountByTypeId(typeId);
        return count;
      }
    }
  };

</script>

<style lang="scss">
  .shop-mall-goods-menu {
    height: 100%;
    overflow: auto;
    background: #f5f6f9;

    >div {
      padding: formatPx(23) 0;
      text-align: center;
      margin-bottom: formatPx(20);
      position: relative;

      &.select {
        background: #ffffff;
      }

      >span {
        font-size: formatPx(30);
        vertical-align: top;
      }

      .menu-select-line {
        position: absolute;
        left: 0;
        top: formatPx(23);
        height: formatPx(48);
        width: formatPx(10);
        background: #59C264;
      }

      .goods-menu-count {
        position: absolute;
        right: 0;
        top: 0;
        background: #FF5124;
        color: #ffffff;
        width: formatPx(36);
        height: formatPx(36);
        line-height: formatPx(36);
        font-size: formatPx(28);
        border-radius: formatPx(18);
        text-align: center;
      }
    }
    .shop-mall-goods-menu-null{
      height: formatPx(100);
    }
  }

</style>
